<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="24" :offset="4">
                <!-- 放搜索条件
                 :inline="true" 使菜单水平
                 :model="formInline" 双向绑定对象,可不写
                 -->
                <el-form :inline="true">
                    <el-form-item label="年份">
                        <el-input  placeholder="年份" v-model="param.year"></el-input>
                      </el-form-item>

                    <el-form-item label="处理状态">
                      <el-select placeholder="请选择状态" v-model="param.status">
                        <el-option :label="s =='1'?'已缴费':'未缴费'" :value="s" v-for="s in statusArr"></el-option>
                    </el-select>
                    </el-form-item>
                    
                      <el-form-item label="业主用户名">
                        <el-input  placeholder="账号" v-model="param.username"></el-input>
                      </el-form-item>

                    <el-form-item>
                      <el-button type="primary" @click="queryRecordsInfo">搜索</el-button>
                    </el-form-item>
                  </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-button type="primary">初始年度数据</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-table
                :data="tableData"
                style="width: 100%">

                <el-table-column
                  prop="id"
                  label="ID"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="buildName"
                  label="楼栋"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="houseName"
                  label="房屋名"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="year"
                  label="年份"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="money"
                  label="金额"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="ownerId"
                  label="用户ID"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="username"
                  label="用户名"
                  width="120">
                </el-table-column>

                <el-table-column
                  prop="status"
                  label="状态">
                  <template slot-scope="scope">
                    <span style="color: blue;">{{scope.row.status == '1'?'已缴费':'未缴费'}}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="payTime"
                  label="支付日期"
                  width="120">
                </el-table-column>

                <el-table-column
                  label="操作">
<!--                    插槽-->
                    <template slot-scope="scope">
                        <el-button type="primary" circle @click="payRecord(scope.row.id)">缴费</el-button>
                    </template>
                </el-table-column>
              </el-table>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- 放分页
                layout:显示分页的内容
                :page-size="5" 设置初始为每页5条
                -->
                <el-pagination
                background
                :page-sizes="[3, 5, 10, 30]"
                :page-size="pageSize"
                :current-page="pageNum"
                layout="prev, pager, next, total, sizes"
                :total="total"
                @next-click="nextPage"
                @prev-click="prevPage"
                @current-change="changePage"
                @size-change="changeSize">
              </el-pagination>
            </el-col>
        </el-row>

    </div>
    

    <script>
        new Vue({
            el:'#app',
            data:{
                tableData:[
                    {
                        id:1,
                        buildName:'1号楼',
                        houseName:'102',
                        year:'2024',
                        money:1110,
                        ownerId:1,
                        username:'wzy',
                        status:1,
                        payTime:'2024-10-11',
                        
                    }
                ],
                param:{

                },
                statusArr:[1,0],
                pageSize:5,
                pageNum:1,
                total:0,
            },
            methods:{
                queryRecords(){
                    let pageData={}
                    pageData.pageSize=this.pageSize
                    pageData.pageNum=this.pageNum
                    pageData.param=this.param
                    axios.post('/records/queryRecords',pageData).then(resp=>{
                        if(resp.data.code==200){
                            this.tableData=resp.data.data.list
                            this.total=resp.data.data.total
                        }

                    })
                },
                queryRecordsInfo(){
                    this.pageNum=1
                    this.queryRecords()
                },
                payRecord(id){
                      axios.get("/records/payRecord/"+id).then(resp=>{
                            if(resp.data.code==200){
                                this.$message({
                                    showClose: true,
                                    message: '缴费成功',
                                    type: 'success'
                                });
                                this.queryRecords()
                            }
                      })
                },
                //下一页方法
                nextPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryRecords()
                },
                //上一页方法
                prevPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryRecords()
                },
                changePage(val){
                    this.pageNum=val
                    this.queryRecords()
                },
                changeSize(val){
                    this.pageSize=val
                    this.queryRecordsInfo()
                },
            },
            created(){
                this.queryRecordsInfo()
            }
        })
    </script>
</body>
</html>